<template>
  <!-- 进/出境相关信息 -->
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="122px"
      label-position="right"
      class="flex-form"
      size="mini"
    >
      <el-form-item label="进出境类型" prop="iEFlag">
        <el-select
          v-model="form.iEFlag"
          @change="iEFlagChange"
          placeholder="请选择进进出境类型"
        >
          <el-option
            v-for="(item, index) in dict.type.mft_ie_flag"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运输批次号" prop="manifestId">
        <el-input
          v-model.trim="form.manifestId"
          placeholder="请输入运输批次号"
          clearable
        />
      </el-form-item>
      <el-form-item label="关区代码" prop="customsCode">
        <el-select
          v-model="form.customsCode"
          placeholder="请选择关区代码"
          filterable
          @change="customsCodeChange"
        >
          <el-option
            v-for="(item, index) in customsList"
            :key="index"
            :label="item.value + '-' + item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="监管场所" prop="fieldCode">
        <el-select v-model="form.fieldCode" placeholder="请选择监管场所">
          <el-option
            v-for="(item, index) in selectBaseFieldInfoList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="国门" prop="gateFieldCode" v-show="selectGateBaseFieldInfoList.length>0">
        <el-select v-model="form.gateFieldCode" placeholder="请选择国门">
          <el-option
            v-for="(item, index) in selectGateBaseFieldInfoList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="货物装载时间" prop="loadTime">
        <el-date-picker
          v-model="form.loadTime"
          type="datetime"
          value-format="yyyyMMddHHmmss"
          placeholder="选择货物装载时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="卸货地代码" prop="unloadCode"  v-show="form.iEFlag=='I'">
        <el-input
          v-model="form.unloadCode"
          placeholder="请输入卸货地代码"
          clearable
        />
      </el-form-item>
      <el-form-item
        label="到达卸货地时间"
        prop="arrivalDate" v-show="form.iEFlag=='I'"
      >
        <el-date-picker
          v-model="form.arrivalDate"
          type="datetime"
          value-format="yyyyMMddHHmmss"
          placeholder="请选择到达卸货地时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="装货地代码" prop="loadCode" v-show="form.iEFlag=='E'">
        <el-input
          v-model="form.loadCode"
          placeholder="请输入装货地代码"
          clearable
        />
      </el-form-item>
      <!-- <el-form-item label="运输工具代理企业代码" prop="agentCode" label-width="168px">
        <el-input
          v-model="form.agentCode"
          placeholder="请输入运输工具代理企业代码"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>


import {
    findBaseFieldInfo,
    getBaseFieldInfo
  } from "@/api/system/baseFieldInfo";
import {findListCustoms} from "@/api/system/customs";
export default {
  props: {
  },
  dicts: [
    "mft_ie_flag",
    "bt_biz_model",
    "mft_binding_type",
    "bt_transport_mode",
    "bt_vehicle_type",
    "bt_country",
    "bt_goods_flow"
  ],
  data() {
    return {
      form: {
        bindingType: null,
        iEFlag: null,
        arrivalDate: null,
        manifestId: null,
        loadTime: null,
        // msgRepName: null,
        customsCode: null,
        fieldCode: null,
        gateFieldCode: null,
        trafMode: "4",
        unloadCode: null,
        loadCode: null,
        // agentCode: "",
      },
      //关区下列列表
      customsList:[],
      //下来场所列表
      selectBaseFieldInfoList: [],
      //国门场所代码
      selectGateBaseFieldInfoList: [],

      // 表单校验
      rules: {
        iEFlag: [
          {
            type: "string",
            required: true,
            message: "进出口标志不能为空",
            trigger: "blur",
          },
        ],
        manifestId: [
          {
            type: "string",
            required: true,
            message: "运输批次号不能为空",
            trigger: "blur",
          },
        ],
        fieldCode: [
          {
            type: "string",
            required: true,
            message: "监管场所不能为空",
            trigger: "blur",
          },
        ],
        gateFieldCode: [
          {
            type: "string",
            required: false,
            message: "国门场所不能为空",
            trigger: "blur",
          },
        ],
        loadTime: [
          {
            type: "string",
            required: true,
            message: "货物装载时间不能为空",
            trigger: "blur",
          },
        ],
        unloadCode: [
          {
            type: "string",
            required: false,
            message: "卸货地代码不能为空",
            trigger: "blur",
          },
        ],
        loadCode: [
          {
            type: "string",
            required: false,
            message: "装货地代码不能为空",
            trigger: "blur",
          },
        ],
        customsCode: [
          {
            type: "string",
            required: true,
            message: "关区代码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {

  },
  created() {
    this.loadCustomsList();
  },
  methods: {

    /* 加载关区信息列表*/
    loadCustomsList() {
      findListCustoms().then(response => {
        this.customsList = response.data;
      });
    },

    iEFlagChange(val){
      if(val=='I'){
        this.rules.unloadCode[0].required=true;
        this.rules.loadCode[0].required=false;
      }else{
        this.rules.loadCode[0].required=true;
        this.rules.unloadCode[0].required=false;
      }
    },

    //关区代码改变时触发
    customsCodeChange(val){
      this.getLoadBaseFieldInfoList();
    },
    //获取场所下拉列表
    getLoadBaseFieldInfoList() {
      findBaseFieldInfo({
        customsCode: this.form.customsCode,
        iEFlag:this.form.iEFlag
      }).then(response => {

        let fieldList = response.data;

        this.selectBaseFieldInfoList= fieldList.filter(n => "1" == n.extVal1||"3" == n.extVal1);

        if (this.selectBaseFieldInfoList != null && this.selectBaseFieldInfoList.length == 1) {
          this.form.fieldCode = this.selectBaseFieldInfoList[0].value;
        }
        if (this.selectBaseFieldInfoList.length > 0) {
          this.selectGateBaseFieldInfoList = fieldList.filter(n => "2" == n.extVal1);
          if( this.selectGateBaseFieldInfoList.length>0){
           this.rules.gateFieldCode[0].required=true;
          }
        }

      })
    },

  },
};
</script>

<style lang="scss" scoped>
.flex-form {
  ::v-deep .el-form-item {
    width: 312px;
  }
  ::v-deep .el-select {
    width: 100%;
  }
  ::v-deep .el-form-item__label {
    line-height: 14px;
    display: flex;
    align-items: center;
    height: 32px;
    justify-content: flex-end;
  }
}
</style>
